<template>
  <div class="common-wrap">
    <div class="cabinet">
      <div v-loading="rightLoading" style="height: 100%">
        <div>
          <div class="condition-form">
            <div class="flex-wrap">
              <div class="card-nav flex-center">
                <span
                  style="font-size: 16px; font-weight: bold"
                  class="margin-left"
                  >{{ route.query.detailed }}</span
                >
                <el-tag effect="light" type="info" class="margin-left">
                  {{ $t("柜号:") }}{{ rightData.containerNo }}
                </el-tag>
              </div>
              <el-tag effect="light" type="info" class="margin-left">
                {{ rightData.specificationsName || "-" }}
              </el-tag>
              <el-tag
                effect="light"
                :type="rightData.goodsTypeName != 'DG' ? 'info' : 'danger'"
                class="margin-left"
              >
                {{ rightData.goodsTypeName || "-" }}
              </el-tag>
              <el-tag effect="light" type="primary" class="margin-left">
                {{ $t(rightData.lineName || "-") }}
              </el-tag>
              <div class="flex-center margin-left">
                <span>{{ $t(rightData.loadingPortName || "-") }}</span>
                <el-icon style="color: #a79f9f; font-size: 16px"
                  ><CaretRight
                /></el-icon>
                <span
                  >{{ $t(rightData.dischargePortName || "-") }},{{
                    $t(rightData.deliveryPortName || "-")
                  }}</span
                >
              </div>
              <div class="flex-center margin-left">
                <span class="left-margin-color">{{ $t("船名/航次") }}</span>
                <span>{{ $t(rightData.vesselName || "-") }}</span>
                <span>/</span>
                <span>{{ $t(rightData.voyageNo || "-") }}</span>
              </div>
              <div class="flex-center margin-left">
                <span class="left-margin-color">
                  {{ $t("船公司") }}
                </span>
                <span>
                  {{ $t(rightData.providerName || "-") }}
                </span>
              </div>
              <div class="flex-center margin-left">
                <span class="left-margin-color">
                  {{ $t("ETD") }}
                </span>
                <span>
                  {{ rightData.estimatedTimeDeparture || "-" }}
                </span>
              </div>
              <div class="flex-center margin-left">
                <span class="left-margin-color">
                  {{ $t("体积(CBM)") }}
                </span>
                <span class="left-margin-color">
                  <span style="color: #3f3939">{{
                    rightData.totalVolume || "-"
                  }}</span>
                  /{{ rightData.maxCubicCapacity || "-" }}
                </span>
                <el-tag effect="light" type="primary">
                  {{
                    calculatePercentage(
                      rightData.totalVolume || 0,
                      rightData.maxCubicCapacity || 0
                    )
                  }}
                </el-tag>
              </div>
              <div class="flex-center margin-left">
                <span class="left-margin-color">
                  {{ $t("毛重(KG)") }}
                </span>
                <span class="left-margin-color">
                  <span style="color: #3f3939">
                    {{ rightData.totalGrossWeight || "-" }}</span
                  >
                  /{{ rightData.maxGrossWeight || "-" }}
                </span>
                <el-tag effect="light" type="primary">
                  {{
                    calculatePercentage(
                      rightData.totalGrossWeight || 0,
                      rightData.maxGrossWeight || 0
                    )
                  }}
                </el-tag>
              </div>
            </div>
          </div>
          <div style="width: 100%; padding: 0 10px">
            <MyTable
              tableId="ViewCabinet"
              :columns="columns"
              :dataSource="rightData.oceanOrderList"
              keyField="id"
              :columnMinWidth="100"
              :loading="false"
              @handleSelectionChange="handleSelectionChange"
            ></MyTable>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="tsx">
import { ref, onMounted, computed } from "vue";
import * as api from "@/api/index.js";
import { useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import { calculatePercentage } from "@/utils/mUtils.js";
const route = useRoute();
defineOptions({
  name: "ViewCabinet",
});
const columns = ref([
  {
    field: "trackingNo",
    title: "业务单号",
    width: 140,
    dragSort: true,
  },
  {
    field: "subProductName",
    title: "渠道",
  },
  {
    field: "customerNameZh",
    title: "客户",
  },
  {
    field: "destWarehouseName",
    title: "仓库",
    width: 100,
  },
  {
    field: "destWarehouseCountryName",
    title: "目的国",
    width: 90,
  },
  {
    field: "inStoragePcs",
    title: "件数",
    width: 80,
  },
  {
    field: "inStorageWeight",
    title: "重量",
    width: 80,
  },
  {
    field: "inStorageVolume",
    title: "体积",
    width: 80,
  },
  {
    field: "goodsTypeName",
    title: "货物类型",
    width: 100,
  },
  {
    field: "loadingPosition",
    title: "装柜顺序",
    width: 100,
  },
  {
    field: "loadingRemark",
    title: "装柜备注",
    width: 200,
  },
  {
    field: "labelingFlag",
    title: "打单贴标",
    formatter: ({ cellValue }) => {
      const obj = {
        0: "否",
        1: "是",
      };
      return obj[cellValue] || "-";
    },
  },
  {
    field: "remark",
    title: "备注",
  },
]);
const rightData = ref({});
const rightLoading = ref(false);
const multipleSelection = ref([]);
onMounted(() => {
  getByIds();
});
const getByIds = async () => {
  try {
    rightLoading.value = true;
    const { data } = await api.default.oceanFreight.cabinetArrangement.getByIds(
      {
        idList: [route.query.id],
        operationFlag: true,
      }
    );
    rightData.value = data?.[0] || {};
    rightLoading.value = false;
  } catch (error) {
    rightLoading.value = false;
  }
};
const handleSelectionChange = (list) => {
  multipleSelection.value = list;
};
</script>

<style lang="scss" scoped>
.cabinet {
  height: 100%;
  color: #3f3939;
}
.right-card {
  padding: 10px;
  margin: 10px;
  border: 1px solid #cccccc69;
  border-radius: 10px;
  cursor: pointer;
}
.right-card-box-shadow {
  box-shadow: 0px 0px 5px 0px #5e8eff69;
}
.card-nav {
}
.flex-center {
  display: flex;
  align-items: center;
}
.left-margin-color {
  color: #979595;
  margin-right: 5px;
}
.margin-left {
  margin-left: 10px;
  margin-bottom: 10px;
}
.flex-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 0px;
  padding-top: 10px;
}
</style>